<template>
    <el-dialog :visible.sync="open" width="75%" append-to-body>
        <div slot="title" class="dialog-title">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="管理平台功能授权" name="1"></el-tab-pane>
                <el-tab-pane label="业务平台功能授权" name="2"></el-tab-pane>
            </el-tabs>
        </div>
        <el-row class="margin-top-sm padding-left padding-right height500">
            <el-col :span="24">
                <div v-if="activeName == '1'">
                    <el-table ref="table" :data="list" show-overflow-tooltip class="margin-top">
                        <el-table-column label="页面名称" prop="name" :show-overflow-tooltip="true" />
                        <el-table-column label="操作权限" prop="operateType">
                            <template v-slot="scope">
                                <span>{{ scope.row.hasOperateButton == 0 ? '查看' : '查看&操作' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="数据范围" >
                            <template v-slot="scope">
                                <template>
                                    <span>{{ roletypes[scope.row.dataScope] + '(' }}{{ scope.row.operateType == 1?'仅可操作个人数据)':'可操作全部数据)' }}</span>
                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div v-if="activeName == '2'">
                    <el-table ref="table" :data="list" show-overflow-tooltip class="margin-top">
                        <el-table-column label="页面名称" prop="name" :show-overflow-tooltip="true" />
                        <el-table-column label="操作权限" prop="operateType">
                            <template v-slot="scope">
                                <span>{{ scope.row.hasOperateButton == 0 ? '查看' : '查看&操作' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="数据范围" >
                            <template v-slot="scope">
                                <template>
                                    <span>{{ roletypes[scope.row.dataScope] + '(' }}{{ scope.row.operateType == 1?'仅可操作个人数据)':'可操作全部数据)' }}</span>
                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button v-preventReClick type="primary" @click="open = false">确 定</el-button>
            <el-button v-preventReClick @click="open = false">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import {
    groupRoleFunction
  } from "@/api/bpm/userGroup";
export default {
    props: {
        // list:{
        //     type:Array,
        //     default:[]
        // }
    },
    data() {
        return {
            open: false,
            activeName: "1",
            form: {},
            role: {},
            list: [],
            roletypes:[
                '个人数据',
                '所在组织',
                '所在组织及下级组织'
            ],
            id: undefined,
        }
    },
    methods: {
        init(id) {
            this.activeName = '1'
            this.open = true;
            this.id = id
            this.handleClick(this.activeName)
        },
        //切换
        async handleClick() {
            console.log(this.activeName);
            const num = this.activeName
            if (!this.id) return this.$message.error('暂未查询到角色')
            const { id } = this
            if (num == 1) {
                groupRoleFunction({ id: id, projectType: 2 }).then(response => {
                    this.list = response.data.filter(v => v.checked == true)
                    console.log(this.list, '------', response.data)
                })
            } else if (num == 2) {
                groupRoleFunction({ id: id, projectType: 1 }).then(response => {
                    console.log(response.data, '--2----')
                    this.list = response.data.filter(v => v.checked == true)
                    console.log(this.list, '----333--')
                })
            }
        },
    },
    created() { }
};
</script>
<style scoped lang="scss">
.height500 {
    height: 400px;
}

::v-deep .el-dialog__header {
    border-bottom: none
}

.back_wapper {
    background-color: #f8f8f9;
    border: 1px solid #dfe6ec;
    color: #515a6e;
    height: 40px;
    font-size: 13px;
    padding: 0 20px;
    line-height: 40px;
}

.back_height {
    height: auto;
}

.wapper {
    background-color: #FFFFFF;
    border-bottom: 0;

    >div:first-child {
        width: 100px;
        border-right: 1px solid #dfe6ec;
        padding: 0 20px 0 0px;
    }
}

.wapper-bt {
    border-bottom: 1px solid #dfe6ec !important;
}</style>